@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	font-family: "华文彩云";
	color: orange;
	font-size: 80px;
}
body{
	background: url(../image/bg2.jpg);
	background-size: 100% 760px;
	background-repeat: no-repeat;
	animation: bj 20s linear infinite;
	overflow: hidden;
}
@keyframes bj{
	0%{
		background-image: url(../image/bg2.jpg);
		background-size: 100% 760px;
	}
	40%{
		background-image: url(../image/bg2.jpg);
		background-size: 100% 760px;
	}
	40%{
		background-image: url(../image/bj.jpg);
		background-size: 100% 760px;
	}
	100%{
		background-image: url(../image/bj.jpg);
		background-size: 100% 760px;
	}
}
 /* 菠萝吹雪：前8秒隐藏，8s后变身出场*/
.boluo{
	width: 200px;
	height: 200px;
	b order: 1px solid red;
	background: url(../image/1.png);
	background-size: 100% 100%;
	position: relative;
	top: 475px;
	left: 148px;
	animation: boluo 10s linear infinite;
	z-index: 20;
}
@keyframes boluo{
	0%{/* 隐藏 */
		opacity: 0;
		visibility: hidden;
	}
	40%{/* 隐藏 */
		opacity: 0;
		visibility: hidden;
	}
	40.1%{/* 出现 */
		top: 475px;
		left: 148px;
		opacity: 1;
		visibility: visible;
		background: url(../image/1.png);
		background-size: 100% 100%;
		transform: scale(1) rotate(0);
	}
	50%{
		top: 450px;
		left: 250px;
		background:url(../image/4.png);
		background-size: 100% 100%;
		transform: scale(1) rotate(360deg);
	}
	70%{/* 变身战斗 */
		top: 400px;
		left: 300px;
		background:url(../image/boluo.png);
		background-size: 100% 100%;
		transform: scale(1.2) rotate(-10deg);
	}
	100%{/* 胜利 */
		top: 450px;
		left: 550px;
		background: url(../image/boluo.png);
		background-size: 100% 100%;
		transform: scale(1.3) rotate(0);
			
		}
}
/* 橙留香：前8s对抗-失败-被追击，8s后共同对抗 */
.orange{
	width: 200px;
	height: 200px;
	b order: 1px solid red;
	background: url(../image/12.png);
	background-size: 100% 100%;
	position: relative;
	top: 76px;
	left: 100px;
	animation: orange 10s linear infinite;
	z-index: 20;
}
@keyframes orange{
	0%{
			top: 76px;
			left: 100px;
			opacity: 1;
			visibility: visible;
			transform: scale(1) rotate(0);
		}
		15%{/* 3秒向右移动 */
			top: 76px;
			left: 600px;
			background:url(../image/12.png);
			background-size: 100% 100%;
			transform: scale(1.1);
		}
		25%{/* 5秒：对抗失败 */
			top: 76px;
			left: 650px;
			background: url(../image/2.png);
			background-size: 100% 100%;
			transform: scale(1) rotate(10deg);
			opacity: 0.8;
		}
		35%{/* 7秒：向左撤退 */
			top: 76px;
			left: 300px;
			background: url(../image/2.png);
			background-size: 100% 100%;
			transform: scale(0.9);
		}
		40%{/* 8秒：出屏幕 */
			top: 76px;
			left: -300px;
			opacity: 0;
		}
		45%{/* 9秒：重新出现 */
			top: 76px;
			left: 320px;
			opacity: 1;
			background: url(../image/12.png);
			background-size: 100% 100%;
		}
		55%{/* 11秒变身 */
			top: 60px;
			left: 400px;
			background: url(../image/2.1.png);
			background-size: 100% 100%;
			transform: scale(1.3) rotate(360deg);
		}
		70%{
			top: 60px;
			left: 500px;
			background: url(../image/cheng.png);
			background-size: 100% 100%;
			transform: scale(1.2) rotate(-5deg);
		}
		100%{/* 胜利 */
			top: 60px;
			left: 700px;
			background:url(../image/cheng.png);
			background-size: 100% 100%;
			transform: scale(1.3) rotate(0);
		}
	}
	/* 陆小果：前8s隐藏，8s后变身出场 */
.green{
	width: 200px;
	height: 200px;
	b order: 1px solid red;
	background: url(../image/5.png);
	background-size: 100% 100%;
	position: relative;
	top: 275px;
	left: -15px;
	animation: green 10s linear infinite;
	z-index: 20;
}
@keyframes green{
	0%{/* 隐藏 */
		opacity: 0;
		visibility: hidden;
	}
	40%{/* 隐藏 */
		opacity: 0;
		visibility: hidden;
	}
	40.1%{/* 8s:出场 */
		top: 275px;
		left: -15px;
		opacity: 1;
		visibility: visible;
		background: url(../image/5.png);
		background-size: 100% 100%;
		transform: scale(1) rotate(0);
	}
	50%{/* 10s变身 */
		top: 225px;
		left: 30px;
		background:url(../image/13.png);
		background-size: 100% 100%;
		transform: scale(1.3) rotate(360deg);
	}
	70%{/* 14s开始战斗 */
		top: 250px;
		left: 200px;
		background: url(../image/guo.png);
		background-size: 100% 100%;
		transform: scale(1.2) rotate(10deg);
	}
	100%{/* 胜利 */
		top: 250px;
		left: 300px;
		background: url(../image/guo.png);
		background-size: 100% 100%;
		transform: scale(1.3) rotate(0);
	}
	
}
.bad{/* 前8s追击橙留香 8s后被攻击 */
	width: 200px;
	height: 200px;
	b order: 1px solid red;
	background: url(../image/9.png);
	background-size: 100% 100%;
	position: relative;
	top: -126px;
	left: 1240px;
	animation: bad 10s linear infinite;
	z-index: 10;
}
@keyframes bad{
	0%{
		top: -126px;
		left: 1240px;
		opacity: 1;
		visibility: visible;
	}
	15%{/* 向左移动 */
		top: -126px;
		left: 1000px;
		opacity: 1;
		background: url(../image/9.png);
		background-size: 100% 100%;
		transform: rotate(0);
	}
	25%{
		top: -126px;
		left: 750px;
		opacity: 1;
		background: url(../image/9.png);
		background-size: 100% 100%;
		transform: scale(1.1) rotate(30deg);
	}
	35%{
		top: -126px;
		left: 400px;
		opacity: 1;
		background: url(../image/9.png);
		background-size: 100% 100%;
	}
	40%{/* 追出屏幕 */
		top: -100px;
		left: -300px;
		opacity: 0;
	}
	50%{/* 重新出现 */
		top: -126px;
		left: 1200px;
		opacity: 1;
		background: url(../image/9.png);
		background-size: 100% 100%;
	}
	70%{/* 被攻击 */
		top: -126px;
		left: 650px;
		background: url(../image/9.png);
		background-size: 100% 100%;
		transform: scale(1.2) rotate(-20deg);
	}
	90%{
		top: -100px;
		left: 650px;
		background: url(../image/9.png);
		background-size: 100% 100%;
		transform: scale(0.8) rotate(90deg);
		
	}
	100%{/* 被击败消失 */
		top: 0px;
		left: 650px;
		opacity: 0;
		}
	}
.bad2{
	width: 200px;
	height: 200px;
	b order: 1px solid red;
	background: url(../image/8.png);
	background-size: 100% 100%;
	position: relative;
	top: -327px;
	left: 1070px;
	animation: bad2 10s linear infinite;
	z-index: 10;
}
	@keyframes bad2{
		0%{
			top: -327px;
			left: 1070px;
			opacity: 1;
			visibility: visible;
		}
		15%{/* 向左移动 */
				top: -327px;
				left: 850px;
				opacity: 1;
				background: url(../image/8.png);
				background-size: 100% 100%;
				transform: rotate(0);
		}
			25%{
				top: -327px;
				left: 750px;
				opacity: 1;
				background: url(../image/8.png);
				background-size: 100% 100%;
				transform: scale(1.1) rotate(-30deg);
		}
			35%{
				top: -327px;
				left: 600px;
				opacity: 1;
				background: url(../image/8.png);
				background-size: 100% 100%;
			}
			40%{/* 追出屏幕 */
				top: -327px;
				left: -300px;
				opacity: 0;
			}
			50%{/* 重新出现 */
				top: -327px;
				left: 1070px;
				opacity: 1;
				background: url(../image/8.png);
				background-size: 100% 100%;
			}
			70%{/* 被攻击 */
				top: -327px;
				left: 550px;
				background: url(../image/8.png);
				background-size: 100% 100%;
				transform: scale(1.2) rotate(20deg);
			}
			90%{
				top: -300px;
				left: 550px;
				background: url(../image/8.png);
				background-size: 100% 100%;
				transform: scale(0.8) rotate(-90deg);
				opacity: 0.6;
				
			}
			100%{/* 被击败消失 */
				top: 0px;
				left: 550px;
				opacity: 0;
				}
		}
